<template>
  <div>
    <div style="display: flex;align-items: center;justify-content: center;">
      <el-card style="width: 80%;margin-top: 30px">
        <div style="display: flex;align-items: center;justify-content: center;width: 100%">
          <el-row :gutter="10">
            <el-col :span="5">
              <div style="margin: 5px">目的地</div>
              <el-autocomplete
                  class="inline-input"
                  v-model="cityKeyword"
                  :fetch-suggestions="querySearchCity"
                  placeholder="城市"
                  @select="handleSelectCity"
                  style="margin-bottom: 5px"
              ></el-autocomplete>
            </el-col>
            <el-col :span="9">
              <div style="margin: 5px">预约时间</div>
              <div class="block">
                <el-date-picker
                    v-model="dateValue"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
              </div>
            </el-col>
            <el-col :span="5">
              <div style="margin: 5px">关键词（选填）</div>
              <el-autocomplete
                  class="inline-input"
                  v-model="keyword"
                  :fetch-suggestions="querySearch"
                  placeholder="机场/火车站/酒店名称..."
                  @select="handleSelect"
              ></el-autocomplete>
            </el-col>
            <el-col :span="5">
              <div style="margin: 5px">酒店级别</div>
              <el-select v-model="level" multiple placeholder="酒店级别">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-button type="primary" icon="el-icon-search" @click.native="search"
                     style="font-size: 18px; width: 122px;height: 61px;border-radius: 10px;margin-left: 20px">
            搜索
          </el-button>
        </div>
      </el-card>
    </div>
    <div style="display: flex;align-items: center;justify-content: center;margin-top: 20px">
      <div style="width: 80%">
        <el-card v-if="hotelData">
          <div style="font-size: 25px;font-weight: bold;margin-left: 80px">{{ hotelData.name }}</div>
          <div style="margin-top: 10px;margin-left: 80px"><i
              class="el-icon-location-information"></i>{{ hotelData.location }}
          </div>
          <div style="display: flex">
            <div style="flex: 1">
              <div style="display: flex">
                <div style="margin-left: 80px">
                  <div style="display: flex;align-items: center;">
                    <div style="display: flex">
                      <img :src="`http://localhost:8000/hotel_image_download/${this.hotel_id}/`" alt=""
                           style="width: 500px;height: 300px">
                    </div>
                  </div>
                </div>
                <div style="flex: 1">
                  <div style="display: flex;align-items: center;justify-content: center">
                    <div style="margin-left: 50px">
                      <div style="margin-bottom: 10px;font-weight: bold;font-size: 24px;">
                        <span style="font-size: 24px;color: #007BFF">{{ hotelData.level }}</span>星级
                      </div>
                      <div style="margin-top: 20px;font-weight: bold;">简介</div>
                      <div
                          style="display: flex;justify-content: center;align-items: center ;background-color: #d4eeff;width: 300px;height: 100px;border-radius: 10px;margin-top: 10px">
                        <div style="margin: 20px">
                          {{ hotelData.intro }}
                        </div>
                      </div>
                      <div style="margin-top: 20px;font-weight: bold;">价格</div>
                      <div style="display: flex">
                        <span style="font-size: 24px;color: #007BFF">￥{{ hotelData.price }}</span>
                        <div style="margin: 10px;font-weight: bold;">起</div>
                        <div style="margin-left: 100px">
                          <el-button type="primary" @click="save">收藏</el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div style="display: flex;align-items: center;justify-content: center;">
      <el-tabs type="border-card" style="width: 80%;margin-top: 20px;margin-bottom: 20px">
        <el-tab-pane label="房间">
          <div style="margin-bottom: 10px;margin-left:5px;font-size: 20px;font-weight: bold;">房间</div>
          <div style="margin-bottom: 20px">
          </div>
          <el-table ref="userTable" :data="RoomData" stripe
                    :header-cell-style="{backgroundColor:'aliceblue',color:'#666'}">
            <el-table-column prop="room_type" label="房间类型"></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="rest" label="剩余"></el-table-column>
            <!--            <el-table-column prop="avatar" label="图片">-->
            <!--              <template v-slot="scope">-->
            <!--                <div style="display: flex;align-items: center">-->
            <!--                  <el-image style="width: 50px;height: 50px;border-radius: 50%" v-if="scope.row.avatar"-->
            <!--                            :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]"></el-image>-->
            <!--                </div>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <el-table-column label="操作" width="150%" align="center">
              <template v-slot="scope">
                <el-button size="mini" type="danger" plain @click="order(scope.row)"
                           v-if="scope.row.status === '已通过' && user.role === '用户'">查看详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin: 10px 0">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total,  prev, pager, next"
                :total="total">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="评论">
          <div style="margin-bottom: 10px;margin-left:5px;font-size: 20px;font-weight: bold;">评论</div>
          <div style="margin-bottom: 10px">
          </div>
          <el-table :data="commentData" stripe
                    :header-cell-style="{backgroundColor:'aliceblue',color:'#666'}">
            <el-table-column prop="id" label="评论id"></el-table-column>
            <el-table-column prop="username" label="用户名"></el-table-column>
            <el-table-column prop="content" label="内容"></el-table-column>
            <el-table-column prop="time" label="时间"></el-table-column>
          </el-table>
          <div style="margin: 10px 0">
            <el-pagination
                @current-change="handleCurrentChange2"
                :current-page="pageNum2"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="pageSize2"
                layout="total,  prev, pager, next"
                :total="total2">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import user from "@/views/user.vue";

export default {
  name: "hotelDetail",
  data() {
    return {
      options: [{
        value: '1',
        label: '一星'
      }, {
        value: '2',
        label: '二星'
      }, {
        value: '3',
        label: '三星'
      }, {
        value: '4',
        label: '四星'
      }, {
        value: '5',
        label: '五星'
      }],
      restaurantsCity: [],
      restaurants: [],
      hotelData: [],//酒店、房间和评论
      RoomData: [],
      commentData: [],
      cityKeyword: "",//四个搜索输入
      dateValue: "",
      keyword: "",
      level: "",
      value: 3.7,
      hotel_id: "",
      pageNum: 1,
      pageSize: 5,
      total: 0,
      pageNum2: 1,
      pageSize2: 5,
      total2: 0,
      userId: "",
      user: JSON.parse(localStorage.getItem("user")),
    }
  },
  //计算时间
  computed: {
    formattedStartDate() {
      if (this.dateValue) {
        const startDate = this.dateValue[0];
        const year = startDate.getFullYear();
        const month = String(startDate.getMonth() + 1).padStart(2, '0');
        const day = String(startDate.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      } else {
        return '';
      }
    },
    formattedEndDate() {
      if (this.dateValue) {
        const endDate = this.dateValue[1];
        const year = endDate.getFullYear();
        const month = String(endDate.getMonth() + 1).padStart(2, '0');
        const day = String(endDate.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      } else {
        return '';
      }
    },
    duration() {
      if (this.dateValue) {
        const diff = Math.ceil((this.dateValue[1] - this.dateValue[0]) / (1000 * 60 * 60 * 24));
        return `${diff}`;
      } else {
        return '';
      }
    },
  },
  methods: {
    save() {
      const hotel_id = this.hotel_id
      console.log("酒店id", this.user.id)
      this.$request.post('/user_collect_hotel/', {
        "user_id": this.user.id,
        "hotel_id": hotel_id,
      }).then(res => {
        if (res.code === '200') {
          this.$message.success("收藏成功")
        } else if (res.code === '501') {
          this.$message.warning("已收藏")
        } else {
          this.$message(res.msg)
        }
      }).catch(() => {
      })
    },
    loadH_R_C() {  //展示酒店
      const hotel_id = this.hotel_id
      this.$request.get('/hotel_detail/' + hotel_id + "/").then(res => {
        if (res && res.data) {
          this.hotelData = res.data.hotel
          this.loadR()
          this.loadC()
        }
      })
    },
    loadR(pageNum) {  //展示房间
      if (pageNum) this.pageNum = pageNum
      const hotel_id = this.hotel_id
      console.log("展示房间", hotel_id)
      this.$request.post('/room_list/', {
        "hotel_id": hotel_id,
        "room_type": this.room_type,
        "page_size": this.pageSize,
        "page_id": this.pageNum,
      }).then(res => {
        if (res.code === '200') {
          this.RoomData = res.data.room_list
          console.log("房间数据", this.RoomData)
          this.total = res.data.amount
        } else if (res.code === '501') {
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    loadC(pageNum) {  //展示评论
      if (pageNum) this.pageNum2 = pageNum
      const hotel_id = this.hotel_id

      this.$request.post('/comment_list/', {
        "hotel_id": hotel_id,
        "page_size": this.pageSize2,
        "page_id": this.pageNum2,
      }).then(res => {
        if (res.code === '200') {
          this.commentData = res.data.comment_list
          console.log("展示评论xxx", this.commentData)
          this.total2 = res.data.amount
        } else if (res.code === '501') {
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    order(row) {//选定房间预约,传送酒店id和房间类型
      this.$router.push({
        path: '/orderDetail',
        query: {
          hotelData: JSON.stringify(this.hotelData),
          roomFrom: JSON.stringify(row)
        }
      })
    },
    search() {
      this.$router.push({
        path: '/hotelList',
        query: {
          cityKeyword: this.cityKeyword,
          formattedStartDate: this.formattedStartDate,
          formattedEndDate: this.formattedEndDate,
          keyword: this.keyword,
          level: this.level,
        }
      })
    },
    querySearchCity(queryString, cb) {
      var restaurantsCity = this.restaurantsCity;
      var results = queryString ? restaurantsCity.filter(this.createFilterCity(queryString)) : restaurantsCity;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilterCity(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadCityAll() {
      return [
        {"value": "上海"},
        {"value": "南京"},
        {"value": "苏州"},
        {"value": "杭州"},
        {"value": "淮安"},
      ];
    },
    loadAll() {
      return [
        {"value": "机场"},
        {"value": "火车站"},
        {"value": "景区"},
        {"value": "医院"},
      ];
    },
    handleSelectCity(item) {
      console.log(item);
    },
    handleSelect(item) {
      console.log(item);
    },
    handleCurrentChange(pageNum) {
      this.loadR(pageNum)
    },
    handleCurrentChange2(pageNum) {
      this.loadC(pageNum)
    },
  },
  mounted() {
    this.restaurants = this.loadAll();
    this.restaurantsCity = this.loadCityAll();
  },
  // 获取关键字
  created() {
    this.hotel_id = this.$route.query.id || ''
    this.loadH_R_C()
  }
}
</script>
<style scoped>

</style>